import React, { useEffect, useState } from 'react'
import { qsListApi } from '@/reqeust'
import { loginExpire } from '@/utils'
import { useHistory } from 'react-router-dom'
import GoBackButton from '../../components/GoBackButton'
import AssignmentOutlinedIcon from '@material-ui/icons/AssignmentOutlined';
import './practicelist.less'

export default function PracticeList(props) {
  const history = useHistory()
  const [qsList, setQSList] = useState([])
  useEffect(() => {
    // qsListApi(props.location.state).then(res=>{
    //   console.log(res);
    // }).catch((err)=>{
    //   loginExpire(err,history,props)
    // })
    setQSList([
      { id: 1, content: 1, color: '#' + Math.random().toString(16).substring(2, 8) },
      { id: 2, content: 2, color: '#' + Math.random().toString(16).substring(2, 8) },
      { id: 3, content: 3, color: '#' + Math.random().toString(16).substring(2, 8) },
      { id: 4, content: 4, color: '#' + Math.random().toString(16).substring(2, 8) },
      { id: 5, content: 5, color: '#' + Math.random().toString(16).substring(2, 8) },
    ])
  }, [])

  const [index,setIndex] = useState(0)
  let startX = 0,endX = 0
  const touchStart = (event)=>{
    startX = event.touches[0].clientX
  }
  const touchMove = event=>{
    endX = event.touches[0].clientX
  }
  const touchEnd = ()=>{
    const dis = Math.abs(endX - startX)
    if(dis >= 50){
      let temp = startX < endX ? index - 1 : index + 1  
      temp <= 0 && (temp = 0)
      temp >= qsList.length - 1 && (temp = qsList.length - 1)
      setIndex(temp)
    }
  }

  return (
    <div className="practice-list">
      <div className="pra-top">
        <div className="pra-total">
            <AssignmentOutlinedIcon />
            <span className="pra-current">9</span>
            <span>/</span>
            <span className="pra-count">10</span>
        </div>
        <div className="collection">收藏</div>
      </div>
      <div className="qs-list"
        onTouchStart={touchStart}
        onTouchMove={touchMove}
        onTouchEnd={touchEnd}
      >
        <ul style={{transform:`translate(${index * -100}vw)`}}>
          {
            qsList.map(item => {
              return <li key={item.id} style={{ backgroundColor: item.color }}>{item.content}</li>
            })
          }
        </ul>
      </div>
      <GoBackButton></GoBackButton>
    </div>
  )
}
